<html>
<head>
    <meta charset="utf-8" />
    <meta
            name="viewport"
            content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <!--
  ArcGIS API for JavaScript, https://js.arcgis.com
  For more information about the intro-popuptemplate sample, read the original sample description at developers.arcgis.com.
  https://developers.arcgis.com/javascript/latest/sample-code/intro-popuptemplate/index.html
  -->
    <title>
        Intro to PopupTemplate | Sample | ArcGIS API for JavaScript 4.16
    </title>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <link
            rel="stylesheet"
            href="https://js.arcgis.com/4.16/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.16/"></script>

    <script>
        require([
            "esri/Map",
            "esri/layers/FeatureLayer",
            "esri/views/MapView",
            "esri/widgets/Legend"
        ], function (Map, FeatureLayer, MapView, Legend) {
            // Create the map
            var map = new Map({
                basemap: "gray"
            });

            // Create the MapView
            var view = new MapView({
                container: "viewDiv",
                map: map,
                center: [-73.95, 40.702],
                zoom: 11
            });

            view.ui.add(new Legend({ view: view }), "bottom-left");

            /*************************************************************
             * The PopupTemplate content is the text that appears inside the
             * popup. {fieldName} can be used to reference the value of an
             * attribute of the selected feature. HTML elements can be used
             * to provide structure and styles within the content. The
             * fieldInfos property is an array of objects (each object representing
             * a field) that is use to format number fields and customize field
             * aliases in the popup and legend.
             **************************************************************/

            var template = {
                // autocasts as new PopupTemplate()
                //:"<font color='#008000'>Beverly Hillstrees by block",
                title: "<font color='#008000'>{NAME} in my  {COUNTY}",
                content: [
                    {
                        // It is also possible to set the fieldInfos outside of the content
                        // directly in the popupTemplate. If no fieldInfos is specifically set
                        // in the content, it defaults to whatever may be set within the popupTemplate.
                        type: "fields",
                        fieldInfos: [
                            {
                                fieldName: "B12001_calc_pctMarriedE",
                                label: "Married %"
                            },
                            {
                                fieldName: "B12001_calc_numMarriedE",
                                label: "People Married",
                                format: {
                                    digitSeparator: true,
                                    places: 0
                                }
                            },
                            {
                                fieldName: "B12001_calc_numNeverE",
                                label: "People that Never Married",
                                format: {
                                    digitSeparator: true,
                                    places: 0
                                }
                            },
                            {
                                fieldName: "B12001_calc_numDivorcedE",
                                label: "People Divorced",
                                format: {
                                    digitSeparator: true,
                                    places: 0
                                }
                            }
                        ]
                    }
                ]
            };

            // Reference the popupTemplate instance in the
            // popupTemplate property of FeatureLayer
            var featureLayer = new FeatureLayer({
                url:
                    "https://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/ACS_Marital_Status_Boundaries/FeatureServer/2",
                popupTemplate: template
            });
            map.add(featureLayer);
        });
    </script>
</head>

<body>
<div id="viewDiv"></div>
</body>
</html>
